<template>
  <div class="createCenter">
    <h1>{{ centerTitle }}</h1>
    <el-icon @click="handleClose" class="icon-close"><CloseBold /></el-icon>
    <div v-show="!isFocus" class="createCenter-content">
      <div class="demand-detail">
        <div class="detail-title justify-between">
          <div class="left-title">
            <!-- <div class="tag">已完成</div> -->
            <div class="tag pending">进行中</div>
            <el-select
              width="auto"
              v-if="demandList.length > 2"
              v-model="curDemand"
              class="m-2"
            >
              <el-option
                v-for="item in demandList"
                :key="item.value"
                :label="item.text"
                :value="item.text"
              />
            </el-select>
            <div class="current-demand-name" v-else>{{ curDemand }}</div>
          </div>
          <div class="right-time">
            <el-icon><Clock /></el-icon>
            <span class="ml-4">24.06.24 - 长期</span>
          </div>
        </div>
        <div class="demand-info justify-between mt-12">
          <div class="info-item">
            <span>单次任务价格：</span>
            <span class="number">999.00</span>
            <span class="unit">元</span>
          </div>
          <div class="info-item">
            <span>稿件数量：</span>
            <span class="number">03</span>
            <span class="unit">篇</span>
          </div>
          <div class="info-item">
            <span>周期：日交</span>
          </div>
        </div>
      </div>
      <div class="keywords">
        <h2>补充关键词</h2>
        <div class="time-picker justify-between">
          <datePicker
            v-model="currentDate"
            @confirm="handleScroll"
          ></datePicker>
          <div class="time-picker-tips">
            <img
              class="dowload-button-img"
              src="@/assets/image/mobile/mine/Frame@2x.png"
              alt=""
            />
            <span>任务稿件说明</span>
          </div>
        </div>
        <div class="days-lsit" ref="daysListref">
          <div
            class="days-item"
            v-for="item in computedTimeSliderList"
            :key="item.day"
            :class="{ 'active-item': item.day === getDate(currentDate) }"
            @click="handleClickItem(item.day)"
          >
            <div class="days-item-label">{{ item.label }}</div>
            <div class="days-item-days">{{ item.day }}</div>
          </div>
        </div>
        <div class="input-key-word" @click="handleOpenInput">
          <p v-if="currentEdit">{{ currentEdit }}</p>
          <template v-else>
            <p class="input-key-word-title">点击输入关键词</p>
            <p>用户须知 (日交任务)</p>
            <p>
              1、在创建充关键词时, 建议您从最近的可选日期开始创建,
              以避免对收稿时间产生预期之外的影响.
            </p>
            <p>
              2、日交任务的关键词必须在任务对应交稿日至少前1天完成补充;
              交稿日当天不可填写或修改关键词.
            </p>
            <p>
              3、若任务未提供任何关键词
              (截至交稿日前1天23:59:59)，则视为用户主动放弃此次交稿服务.
            </p>
            <p>
              4、关键词提交审核后不能进行修改.
              关键词描述越丰富、越准确，小编撰写的文章质量越高哦
            </p>
          </template>
        </div>
        <div class="submit-keyword">
            <div v-if="currentEdit" class="img-box" @click="handleSubmitKeyWord">
                
            </div>
            <img v-else src="@/assets/image/mobile/mine/submit-forbidden.png" alt="">

        </div>
      </div>
    </div>
    <div class="input-key-word" v-show="isFocus">
      <el-input
        @blur="isFocus = false"
        ref="keyWordInputRef"
        placeholder="请输入关键词"
        autosize
        resize="none"
        v-model="currentEdit"
        style="width: 100%"
        type="textarea"
      />
    </div>
  </div>
</template>

<script setup>
import { Clock, CloseBold } from "@element-plus/icons-vue";
import datePicker from "./common/datePicker.vue";
import {
  format,
  add,
  startOfWeek,
  subDays,
  getDaysInMonth,
  getMonth,
  getYear,
  getDay,
  getDate,
  setDate,
} from "date-fns";
const keyWordInputRef = ref(null);
const centerTitle = ref("创作中心");
const props = defineProps({
  currentDemand: {
    type: Object,
    default: {},
  },
  demandList: {
    type: Array,
    default: [],
  },
  isShow: {
    type: Boolean,
    default: false,
  },
});
const handleOpenInput = () => {
  isFocus.value = true;
  centerTitle.value = "输入关键词";
  keyWordInputRef.value.focus();
};
const currentDate = ref(new Date());
const curDemand = ref("");
const emits = defineEmits(["close"]);
const isFocus = ref(false);
const currentEdit = ref("");
const computedTimeSliderList = computed(() => {
  let curMonth = getMonth(currentDate.value);
  let curYear = getYear(currentDate.value);
  let curDay = getDate(new Date());
  let curMonthDay = getMonth(new Date());
  let curYearDay = getYear(new Date());

  let len = getDaysInMonth(new Date(curYear, curMonth));
  let list = Array.from({ length: len }, (_, index) => index + 1).map((ii) => {
    let label = "";
    if (ii == curDay && curMonth === curMonthDay && curYear === curYearDay) {
      label = "今日";
    } else if (
      ii === curDay - 1 &&
      curMonth === curMonthDay &&
      curYear === curYearDay
    ) {
      label = "昨日";
    } else {
      switch (getDay(new Date(curYear, curMonth, ii))) {
        case 0:
          label = "周日";
          break;
        case 1:
          label = "周一";
          break;
        case 2:
          label = "周二";
          break;
        case 3:
          label = "周三";
          break;
        case 4:
          label = "周四";
          break;
        case 5:
          label = "周五";
          break;
        case 6:
          label = "周六";
          break;
        default:
          break;
      }
    }
    return {
      day: ii,
      label,
    };
  });
  return list;
});
const handleClickItem = (day) => {
  currentDate.value = setDate(currentDate.value, day);
};
const handleClose = () => {
  emits("close");
};
watch(
  () => props.isShow,
  (val) => {
    if (val === true) {
      if (props.currentDemand != 0) {
        curDemand.value = props.currentDemand;
      } else {
        curDemand.value = props.demandList[0].value;
      }
    }
  }
);
const handleScroll = () => {
  let day = getDate(currentDate.value);
  let curIndex = computedTimeSliderList.value.findIndex(
    (item) => item.day === day
  );
  if (curIndex !== -1) {
    daysListref.value.scrollLeft = curIndex * 50 + 5;
  }
};
const handleSubmitKeyWord = () => {
    console.log('提交关键词');
}
onMounted(() => {
  handleScroll();
});

const daysListref = ref(null);
</script>

<style lang="scss" scoped>
.createCenter {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #f5f5f5;
  z-index: 21;
  padding: 16px;
  box-sizing: border-box;
  .has-expired {
    background: #e6e6e6;
    color: #999999;
  }
  h1 {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    line-height: 24px;
  }
  .icon-close {
    position: absolute;
    font-size: 24px;
    color: #333333;
    top: 16px;
    left: 16px;
  }
  .justify-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .createCenter-content {
    margin-top: 12px;
    .demand-detail {
      width: 100%;
      background: #ffffff;
      border-radius: 8px 8px 8px 8px;
      padding: 8px 8px 12px 8px;
      box-sizing: border-box;
    }
    .detail-title {
      :deep(.el-select__wrapper) {
        box-shadow: none;
        border: none;
        outline: none;
        background: none;
        padding-left: 4px;
        .el-select__placeholder {
          position: relative;
          width: auto;
          transform: none;
          line-height: 12px;
          span {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            display: inline-block;
            max-width: 200px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        .el-select__selection {
          flex: none;
        }
        .el-select__suffix {
          .el-icon {
            color: #333333;
          }
        }
      }
      .left-title {
        display: flex;
        align-items: center;
      }
      .right-time {
        display: flex;
        align-items: center;
        font-family: Komu A, Komu A;
        font-weight: normal;
        font-size: 12px;
        color: #808080;
        line-height: 12px;
      }
      .tag {
        height: 14px;
        background: #e6e6e6;
        border-radius: 2px 2px 2px 2px;
        font-weight: bold;
        font-size: 10px;
        color: #999999;
        padding: 2px;
        white-space: nowrap;
      }
      .pending {
        background: #4560e6;
        color: #ffffff;
      }
    }
    .demand-info {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #999999;
      .number {
        font-family: Komu A, Komu A;
        font-weight: normal;
        font-size: 14px;
        color: #999999;
        margin-right: 2px;
      }
      .unit {
        font-size: 10px;
      }
    }
    .keywords {
      h2 {
        font-weight: bold;
        font-size: 14px;
        color: #333333;
        line-height: 14px;
        margin: 16px 0;
      }
      .time-picker {
        .time-picker-tips {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 10px;
          color: #666666;
          display: flex;
          align-items: center;
          img {
            width: 12px;
            height: 12px;
            margin-right: 4px;
          }
        }
      }
    }
    .days-lsit {
      width: 100%;
      display: flex;
      overflow: overlay;
      margin-top: 16px;
      height: 50px;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
      .days-item {
        width: 40px;
        height: 50px;
        flex-shrink: 0;
        margin: 0 5px;
        text-align: center;
        padding: 6px 0;
        box-sizing: border-box;
        color: #333333;
        .days-item-label {
          font-weight: 500;
          font-size: 10px;
        }
        .days-item-days {
          font-weight: bold;
          font-size: 12px;
          margin-top: 10px;
        }
      }
      .active-item {
        background: #ecefff;
        color: #4560e6;
      }
    }
    .submit-keyword {
      width: 260px;
      height: 38px;
      margin: 0 auto;
      margin-top: 16px;
      img {
        width: 100%;
        height: 100%;
      }
      div {
        width: 100%;
        height: 100%;
        background: url("@/assets/image/mobile/mine/Component 314@2x.png");
        background-size: cover;

        &:hover {
          background: url("@/assets/image/mobile/mine/Component 315@2x.png");
          background-size: cover;
        }
      }
    }
  }
  .input-key-word {
    margin-top: 12px;
    width: 100%;
    height: 420px;
    background: #ffffff;
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;
    font-weight: 500;
    color: #dfdfdf;
    font-size: 12px;
    line-height: 24px;
    :deep(.el-textarea__inner) {
      border: none;
      box-shadow: none;
      padding: 0;
      font-size: 12px;
    }
    .input-key-word-title {
      color: #acaaaa;
    }
  }
}
</style>
